<template>
  <render v-bind="props"></render>
</template>
<script setup lang="ts" name="list">
import { ref, reactive, h } from 'vue'
import { ParagraphItem } from '../util'
import TextNode from '../nodes/TextNode.vue'
type PROPS = { data: ParagraphItem }
const props = withDefaults(defineProps<PROPS>(), {})
const render = (props: PROPS) => {
  const { data } = props
  if (!data.list) return h('div', { class: 'opus-list-error' })
  const list = data.list
  const { items, style } = list
  return h(
    1 === style ? 'ol' : 'ul',
    items.map((item) =>
      h(TextNode, {
        class: `level-${item.level}`,
        tag: 'li',
        nodes: item.nodes || [],
      })
    )
  )
}
</script>
<style lang="scss" scoped></style>
